<!-- CHAT -->
<div class="message" fxFlex fxLayout="column">

  <!-- CHAT TOOLBAR -->
  <mat-toolbar class="message-toolbar">

    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">

      <div fxLayout="row" fxLayoutAlign="start center">

        <button mat-icon-button fxHide.gt-md class="responsive-messages-button mr-16"
                fuseMatSidenavToggler="message-left-sidenav" aria-label="messages button">
          <mat-icon>message</mat-icon>
        </button>

        <div fxLayout="row" fxLayoutAlign="start center">

          <div *ngIf="!isNewMessage" class="message-contact">

            <div class="avatar-wrapper">
              <!-- <img [src]="selectedMessageQRCode" class="avatar" /> -->
            </div>

            <div class="message-contact-name">
              {{message.senderRS}}
            </div>
          </div>

          <div *ngIf="isNewMessage" class="message-contact-name-input">
            <mat-form-field floatLabel="never" appearance="standard">
              <input matInput prefix="BURST-" burstInputValidator [patterns]="burstAddressPatternRef"
                     mask="____-____-____-_____" [dropSpecialCharacters]="false" [showMaskTyped]="true"
                     [(ngModel)]="message.senderRS" name="message.senderRS" placeholder="{{ 'recipient' | i18n }}">
            </mat-form-field>

          </div>

          <mat-icon class="encryption-icon"
                    [ngClass]="getIconStyle()"
                    fuseMatSidenavToggler="message-right-sidenav"
                    matTooltip="{{encrypt ? 'Messages will be encrypted' : 'Messages will be plain text'}}"
          >
            {{encrypt ? 'lock' : 'lock_open'}}
          </mat-icon>

          <div class="fee-hint"
               fuseMatSidenavToggler="message-right-sidenav"
               matTooltip="{{'fee' | i18n}}"
          >{{feeNQT}}</div>
        </div>
      </div>

      <div>
        <button mat-icon-button [matMenuTriggerFor]="contactMenu" aria-label="more">
          <mat-icon>more_vert</mat-icon>
        </button>

        <mat-menu #contactMenu="matMenu">
          <button mat-menu-item fuseMatSidenavToggler="message-right-sidenav">
            Options
          </button>
        </mat-menu>
      </div>

    </div>
  </mat-toolbar>

  <!-- CHAT CONTENT -->
  <div id="message-content" fxFlex="1 1 auto" fusePerfectScrollbar>

    <!-- CHAT MESSAGES -->
    <div class="messages">

      <!-- MESSAGE -->
      <div *ngFor="let message of message.dialog; let i = index" class="message-row" [ngClass]="{
                            'me': message.contactId === selectedUser.account,
                            'contact': message.contactId !== selectedUser.account,
                            'first-of-group': isFirstMessageOfGroup(message, i),
                            'last-of-group': isLastMessageOfGroup(message, i)
                            }">

        <div class="bubble">
          <div class="message encrypted" *ngIf="message.encryptedMessage && !message.message">
            <div *ngIf="!showPin[message.timestamp]">
              <mat-icon class="s-16 lock" (click)="showPin[message.timestamp]=true">lock</mat-icon>
            </div>
            <div *ngIf="showPin[message.timestamp]">
              <form (ngSubmit)="submitPinPrompt($event)">
                <mat-form-field>
                  <input matInput type="password" [(ngModel)]="pin" name="pin" placeholder="{{ 'input_pin' | i18n }}">
                </mat-form-field>
                <button type="submit" class="mr-8" mat-button color="primary">{{ "submit" | i18n }}</button>
              </form>
            </div>
          </div>
          <div class="message">{{message.message}}</div>
          <div class="time secondary-text">{{convertTimestampToDate(message.timestamp) | date:'short'}}</div>
        </div>

      </div>
      <!-- / MESSAGE -->

    </div>
    <!-- CHAT MESSAGES -->

  </div>
  <!-- / CHAT CONTENT -->

  <!-- CHAT FOOTER -->
  <div class="message-footer" fxFlex="0 0 auto" fxLayout="column">

    <!-- REPLY FORM -->
    <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
         *ngIf="selectedUser.type !== 'offline'">

      <form #replyForm="ngForm" (ngSubmit)="sendMessage($event)" (keydown.enter)="sendMessage($event)" fxFlex
            fxLayout="row"
            fxLayoutAlign="start center">

        <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
                    <textarea matInput #replyInput placeholder="Type your message" ngModel name="message" [rows]="1"
                              [matTextareaAutosize]="true" required></textarea>
        </mat-form-field>

        <mat-form-field class="message-text password-field" fxFlex floatLabel="never" appearance="standard">
          <input type="password" matInput required #pinInput placeholder="{{'enter_pin' | i18n}}" ngModel name="pin">
        </mat-form-field>

        <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message"
                [disabled]="!canSubmitReply()">
          <ng-container *ngIf="!isSending">
            <mat-icon [class.enabled]="canSubmitReply() || false">send</mat-icon>
          </ng-container>
          <ng-container *ngIf="isSending">
            <mat-spinner diameter="20"></mat-spinner>
          </ng-container>
        </button>

      </form>


    </div>
    <!-- / REPLY FORM -->

  </div>
  <!-- / CHAT FOOTER-->

</div>
<!-- / CHAT -->
